<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 深浅拷贝 --- 都是针对与复杂数据类型的
      // js有7种基本数据类型 + 1种复杂数据类型 --------- 往底层去储存在内层的什么位置。 普通数据类型储存在栈里面，复杂数据类型储存在堆里面

      // 如果对象里面只有一层对象，那么使用...展开运算符可以实现 浅拷贝。
      // 如果对象里面有多层级对象，那么这个时候就需要使用深拷贝的方式实现 --- 本质上深拷贝就是不断的使用递归函数，将对象里面所有是复杂类型的属性都生成一个新地址的写法
      let obj1 = { age: 20, address: { city: '武汉' } };
      // 深拷贝工作里面 用用 lodash的 cloneDeep。 或者 JSON.parse(JSON.stringify(obj1))
      // let obj2 = _.cloneDeep(obj1)
      let obj2 = JSON.parse(JSON.stringify(obj1)); // 这样一写就把所有对象里面的属性生成一个新地址
      obj2.address.city = '北京';
      console.log(obj1, obj2);

      // let obj2 = { ...obj1 }; 这里是有bug的写法
      // obj2.address.city = '北京';
      // console.log(obj1, obj2);

      // let obj1 = { age: 20 };
      // let obj2 = { ...obj1 }; // 这句就是用对象的解构赋值生成了一个新地址，从而达到拷贝的效果。 这个代码还是有一些缺陷
      // obj2.age = 100;
      // console.log(obj1, obj2);

      // let a = 1;
      // let b = a; // 值赋值了过去，a还是自己的1
      // b = 10;
      // console.log(a, b);

      // let obj1 = { age: 20 };
      // let obj2 = obj1; // 址赋值了过去
      // obj2.age = 100;
      // console.log(obj1, obj2); // 正是因为这两个对象值一样的问题，才导致了我们有深浅拷贝的概念

      // let a = 1;
      // function fn(a) {
      //   a = 2;
      //   console.log(a);
      // }

      // fn(a);
      // console.log(a);

      // let obj = { name: '鲁班' };
      // function fn2(obj) {
      //   obj.name = '荆轲';
      //   console.log(obj);
      // }

      // fn2(obj);
      // console.log(obj);
    </script>
  </body>
</html>
